import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonButtons, IonMenuButton, IonCard, IonCardHeader, IonCardTitle, IonCardContent } from '@ionic/react';
import './Home.css';

const Home: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start">
            <IonMenuButton />
          </IonButtons>
          <IonTitle>Ollama UI</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent className="ion-padding">
        <IonCard>
          <IonCardHeader>
            <IonCardTitle>Welcome to Ollama UI</IonCardTitle>
          </IonCardHeader>
          <IonCardContent>
            <p>This is a desktop application for managing and interacting with Ollama models. Use the menu to:</p>
            <ul className="list-disc pl-6 mt-2">
              <li>Access the terminal for executing Ollama commands</li>
              <li>Manage your Ollama models</li>
              <li>Monitor server status</li>
            </ul>
          </IonCardContent>
        </IonCard>
      </IonContent>
    </IonPage>
  );
};

export default Home;
